<!-- 通用报表 -->
<template>
  <div class="systemPage-wrapper">
    <dataOriginDetail v-if="visable" @hide="hide" :multipleSelection='multipleSelection' @ok='addOk'></dataOriginDetail>
	  <dataOriginAdd v-if="isShow" @hide="hide" @ok='addOk'></dataOriginAdd>
    <div class="topbar">
      <span class="iconfont iconxitongpingtai-tongyongbaobiao"></span>
      <span>数据源</span>
    </div>
    <div class="content-background">
      <div class="content-wrapper">
        <!-- 表头添加删除 -->
        <div class="searches-wrapper">
          <div class="buttons-wrapper">
            <span
              :class="[multipleSelection.length>0&&isAble?'systemButtonDelete':'systemButtonDelete systemButtonDisabled']"
              @click="del"
            >删除</span>
            <span class="systemButtonEdit" @click="edit">编辑</span>
            <span class="systemButtonAdd" @click="add">新增</span>
          </div>
          <!-- <div class="query-wrapper">
            <div class="query-box">
              <span class="span-name">关键词:</span>
              <el-input v-model="queryList.keyword" placeholder="请输入内容" class="systemInput"></el-input>
            </div>
            <span class="systemButtonQuery query-box" @click="queryData(0)">查询</span>
          </div> -->
        </div>
        <el-table
          class="systemTable"
          :highlight-current-row="true"
          stripe
          :data="tableData"
          ref="multipleTable"
          :height="tableHeight"
          max-height="calc(100%)"
          size="medium"
          row-class-name="row"
          cell-class-name="column"
          :cell-style="cellStyle"
          @selection-change="handleSelectionChange"
          @select="select"
          @select-all="selectAll"
          @row-click="rowClick"
          style="width: 100%;"
          :fit="true"
        >
          <el-table-column type="selection" width="55" @selection-change="handleSelectionChange"></el-table-column>
          <el-table-column
            min-width="80"
            prop="id"
            label="id"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            min-width="80"
            prop="name"
            label="名称"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            min-width="80"
            prop="dataSource"
            label="数据源"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            min-width="80"
            prop="status"
            label="激活状态"
            :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{scope.row.status?'开启':'关闭'}}
            </template>
          </el-table-column>
        </el-table>
        <!-- <el-pagination
          class="systemPagination"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="queryList.pageSize"
          background
          layout="sizes,slot, prev, pager, next, jumper"
          :total="total"
        >
          <span class="totalCount">从{{start}}到{{end}}/共{{total}}条数据</span>
        </el-pagination> -->
      </div>
    </div>
  </div>
</template>

<script>
import dataOriginDetail from "../components/definition/dataOriginDetail";
import dataOriginAdd from "../../business/components/dataOriginAdd.vue";
import { dataOriginAll, dataOriginDel } from '@/system/api/listStructure.js';
import { MessageBox } from 'element-ui';
export default {
  components: {
    dataOriginDetail,
	  dataOriginAdd
  },
  data() {
    return {
	    isShow:false,
      pageSizes: [10, 20, 30, 40],
      start: 1,
      end: 10,
      isAble: false,
      detailId: "",
      total: 400,
      visable: false,
      count: 100,
      isActive: 1,
      currentPage: 1,
      available: "true",
      tableHeight: 0,
      queryList: {
        timeValue: "",
        keyword: "",
        value: "",
        pageSize: 10,
        page: 0,
      },
      multipleSelection: [],
      // 表格数据
      tableData: [],
      // 表头数据
      tableLabel: [
        {
          label: "微服务",
          width: "",
          prop: "name",
        },
        {
          label: "数据源",
          width: "",
          prop: "dataSource",
        },
        {
          label: "激活状态",
          width: "",
          prop: "status",
        }
      ],
      rowId: '' // 选中ID
    };
  },
  created() {
    this.dataOriginAll()
  },
  async mounted() {
    await this.getTableHeight();
    this.queryData(0);
  },
  methods: {
    //微服务刷新
    async dataOriginAll() {
      this.tableData = []
      const originAll = await dataOriginAll()
      console.log(originAll);
      if(originAll.code == 200){
        originAll.info.map(item =>{
          this.tableData.push(item)
        })
      }else{
        this.$message('获取微服务失败')
      }
    },
    // 微服务新增
    addOk() {
      this.visable = false;
      this.isShow = false;
      setTimeout(() => {
        this.dataOriginAll()
      }, 100);
    },
    // table高度
    getTableHeight() {
      let that = this;
      let contentHeight = document.getElementsByClassName("content-wrapper")[0]
        .offsetHeight;
      let searchesHeight = document.getElementsByClassName(
        "searches-wrapper"
      )[0].offsetHeight;
      that.tableHeight = contentHeight - searchesHeight - 72;
      let tableBodyHeight = that.tableHeight - 40;
      that.queryList.pageSize = parseInt(tableBodyHeight / 40);
      this.end = parseInt(tableBodyHeight / 40);
      that.pageSizes.push(that.queryList.pageSize);
    },
    cellStyle(row, column, rowIndex, columnIndex) {
      //根据报警级别显示颜色
      if (row.column.label === "频率" && row.row.frequency === "高") {
        return "color:rgba(83, 167, 255, 1)";
      }
    },
    rowClick(row, col, event) {
      // console.log(row.name);
      row.flag = !row.flag;
      this.$refs.multipleTable.toggleRowSelection(row, row.flag);
    },
    queryData(page) {
      if (page) {
        this.queryList.page = page - 1;
        this.currentPage = page;
      } else {
        this.queryList.page = 0;
        this.currentPage = 1;
      }
    },
    handleSizeChange(val) {
      this.queryList.pageSize = val;
      this.start = 1;
      this.end = val;
      this.queryData(0);
    },
    handleCurrentChange(val) {
      this.start = this.queryList.pageSize * (val - 1) + 1;
      this.end = this.queryList.pageSize * val;
      this.queryData(val);
    },
    handleSelectionChange(val) {
      console.log(val);// 当前行数据
      this.multipleSelection = val;
      this.rowId = []
      let count = 0;
      for (let j = 0; j < this.multipleSelection.length; j++) {
        if (this.multipleSelection[j].id) {
          count = count + 1;
          this.rowId.push(val[0].id)
        }
      }
      this.isAble = count;
      // console.log('this.rowId',this.rowId);
    },
    select(e) {
      // this.multipleSelection = e;
    },
    async del(e) {
      // console.log(this.rowId.length);
      if(this.rowId.length > 1){
        this.$message.error('请选中一条信息')
      }else{
        const confirm = await MessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch(err => err)
        if (confirm !== 'confirm') {
          return this.$message.info('取消删除！');
        }
        const { code } = await dataOriginDel(this.rowId)
        console.log(code);
        if(code != 200){
          this.$message.error('删除失败')
        }else{
          this.$message.success('删除成功')
          this.dataOriginAll()
        }
      }
    },
    edit(e) {
      console.log(this.multipleSelection);
      if(this.multipleSelection.length == 0){
        this.$message.error('必须选中一条数据')
      }else if(this.multipleSelection.length > 1){
        this.$message.error('只能选中一条数据')
      }else{
        // 传递数据弹框
        this.visable = true
      }
      // if (this.multipleSelection.length !== 1) {
      //   this.message("必须选中一条记录", 3);
      //   return false;
      // }
      // if (this.multipleSelection[0].state == 1) {
      //   this.message("已发送的信使不允许编辑！", 3);
      //   return false;
      // }
      // this.visable = true;
      // this.detailId = this.multipleSelection[0].id;
    },
    add() {
      this.isShow = true;
      this.detailId = 0;
    },
    selectAll(e) {
      // this.multipleSelection = e;
    },
    hide() {
      this.visable = false;
      this.isShow = false;
      this.$refs.multipleTable.clearSelection();
    }
  },
};
</script>

<style scoped>
.center {
  overflow-y: auto;
  min-width: 1200px;
  width: 100%;
  height: calc(100% - 42px);
}
</style>
<style>
</style>
